// HelloWorld.Vue
<template>
  <div>
    <!-- {{ rawData }} -->
    {{ winSize }}
    <el-button @click="test">test</el-button>
    <div ref="chart" :style="EChartStyle"></div>
  </div>
</template>
<script>
// 引入 ECharts 主模块
import { mapState, mapMutations } from 'vuex';
// import * as echarts from 'echarts';
export default {
  name: 'HelloWorld',
  components: {},
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      rawData: [],
    };
  },
  computed: {
    ...mapState(['winSize']),
    EChartStyle: function() {
      return {
        width: `${this.winSize[0]}px`,
        height: `${this.winSize[1]}px`,
      };
    },
    dates: function() {
      return this.rawData.map((item) => {
        return item[0];
      });
    },
    data: function() {
      return this.rawData.map(function(item) {
        return [item[1], item[4], item[2], item[3]];
      });
    },
  },
  methods: {
    test: function() {},
    calculateMA: function(dayCount, data) {
      var result = [];
      for (var i = 0, len = data.length; i < len; i++) {
        if (i < dayCount) {
          result.push('-');
          continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
          sum += data[i - j][1];
        }
        result.push(sum / dayCount);
      }
      return result;
    },
  },
  beforeCreate: function() {
    console.log('实例初始化之后，数据观测和事件绑定之前');
  },
  created: function() {
    console.log('实例初始化完成，挂载尚未开始时');
  },
  beforeMount: function() {
    console.log('挂载之前，rander函数首次被调用时');
  },
  mounted: function() {
    console.log('在实例挂载到DOM节点上之后');
  },
  beforeUpdate: function() {
    console.log('数据更新时，在虚拟DOM状态变化之前');
  },
  updated: function() {
    console.log('虚拟DOM被重新渲染之后');
  },
  beforeDestroy: function() {
    console.log('实例销毁之前，此时实例依然可用');
  },
  destroyed: function() {
    console.log('实例销毁后，此时实例及其子实例将完全解绑');
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
